<template>
  <div>
    <a-row>
      <a-col :span="24" class="brand-car_content">
          <BrandCar ref="BrandCar" @selectedChange="count=>selectedCount=count"></BrandCar>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <div class="brand-car__footer">
          <div class="footer-left">
            <span
                @click="showSelected"
              style="margin-left: 21.9px; cursor: pointer"
              >查看已选 ({{selectedCount}})</span
            ><span></span>
          </div>
          <div class="footer-right">
            <a-button size="large"  @click="$refs.BrandCar.checkAll(false)">重置</a-button>
            <a-button type="primary" size="large"  @click="$refs.BrandCar.checkAll(true)"
              >全选</a-button
            >
          </div>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import BrandCar from './BrandCarNew';

export default {
    components:{BrandCar},
    data(){
        return{
            visible:false,
            selectedCount:0
        }
    },
    methods:{
        showSelected(){
            this.$refs.BrandCar.showSelected();
        }
    }

};
</script>

<style scoped lang="less">

.brand-car_content{
    height: 300px;
}

.brand-car__footer{
    width: 100%;
    height: 50px;
    line-height: 50px;

    .footer-left{
        float:left;
    }
    .footer-right{
        float:right;

        .ant-btn {
            margin-right: 15.5px;
        }
    }
    border-top: 2px solid #edeff4;

}
</style>
